<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>兑换</title>
    <link rel="stylesheet" href="../../icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/frame0/gift-bag.css">

    <style>

    </style>
</head>

<body>
  <div class="giftBag">
    <!-- 头部 -->
    <header>
      <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
      <span>兑换</span>
    </header>
    <!-- 卡券区域 -->
    <div class="content" id="content">
      <!-- <div class="couponList">
        <div class="couponImg">
          <img src="../../image/5555.jpg" alt="">
        </div>
        <div class="couponCenter">
          <p>寿县美好时光</p>
          <p>20元餐饮优惠券</p>
          <p>有效期：截止2020.12.31</p>
        </div>
        <div class="couponBtn">
          <button class="btn_conversion">领取</button>
        </div>
      </div> -->
    </div>

  </div>
  <!-- 选择兑换方式 -->

  <!-- 余额兑换 -->
</body>
<script type="text/javascript" src="../../lib/zepto.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/dns.js"></script>
<script type="text/javascript" src="../../lib/artTemplate/template.js"></script>
<script type="text/html" id="getbag">
  {{each items as value index}}
    <div class="couponList">
      <div class="couponImg">
        <img src="{{value.merchant.img.url}}" alt="" style="width:100%;height:100%">
      </div>
      <div class="couponCenter">
        <p>{{value.merchant.title}}</p>
        <p>{{value.title}}</p>
        {{if value.limit_time_type==1}}
          <p>有效期：{{value.day.str}}</p>
        {{/if}}
        {{if value.limit_time_type==2}}
          <p>有效期：{{value.start_time}}至{{value.end_time}}</p>
        {{/if}}
      </div>
      <div class="couponBtn">
        <button class="btn_conversion" couponId="{{value.id}}" typeAttr="{{value.type}}" integralAttr="{{value.integral}}" balanceAttr="{{value.balance}}">兑换</button>
      </div>
    </div>
  {{/each}}
  <div class="select">
    <div class="box">
       <img src="../../image/bmy1.png" alt="" style="position:fixed;bottom:5rem;z-index:88">
       <div class="white_box">
          <div class="btn_integral">
            <img src="../../image/tb2.png" alt="">
            <p>积分兑换</p>
          </div>
          <div class="btn_balance">
            <img src="../../image/tb1.png" alt="">
            <p>余额兑换</p>
          </div>
       </div>
    </div>
  </div>
  <!-- 积分兑换 -->
  <div class=" integral">
    <div class="box1">
       <!-- <img src="../../image/bmy.png" alt="">
       <p class="p2">积分兑换</p> -->
       <div class="white_box1">
          <p class="p3">所需积分：15</p>
          <div class="div1">
            <button id="yes1">确定</button>
            <button id="no1">取消</button>
          </div>
          <div class="pink">
            <p>恭喜你兑换成功</p>
            <p>请到我的卡券中查看</p>
          </div>
       </div>
    </div>
  </div>
</script>

<script>
  apiready = function() {
    getbagList()

  }
  function getbagList() {
    var token = localStorage.getItem("token");
    $.ajax({
      type:"get",
      data:{
        action:2
      },
      beforeSend: function(request) {
          request.setRequestHeader("token", token);
      },
      url:dns+"coupon/read",
      success:function(res){
        // console.log(JSON.stringify(res));
        var html = template("getbag",{"items":res.data});
        document.getElementById("content").innerHTML = html;
        // 领取
        getbtn()
      }
    })
  }
  function getbtn() {
    $(".btn_conversion").each(function () {
      $(this).click(function () {
        var that = $(this);
        var type = $(this).attr("typeAttr");
        console.log(type,"类型");
        var integral = $(this).attr("integralAttr");
        console.log(integral,"需要积分");
        var balance = $(this).attr("balanceAttr");
        console.log(balance,"需要余额");
        if(type==2){
          var strVar="";
          strVar += "<div class=\"btn_integral\">";
          strVar += "              <img src=\"..\/..\/image\/tb2.png\" alt=\"\"><p>积分兑换<\/p><\/div>";
          $(".white_box").html(strVar);
        }
        if(type==3){
          var strVar="";
          strVar += "<div class=\"btn_balance\">";
          strVar += "            <img src=\"..\/..\/image\/tb1.png\" alt=\"\">";
          strVar += "            <p>余额兑换<\/p>";
          strVar += "          <\/div>";
          $(".white_box").html(strVar);
        }
        if(type==4){
          var strVar="";
          strVar += "<div class=\"btn_integral\">";
          strVar += "            <img src=\"..\/..\/image\/tb2.png\" alt=\"\">";
          strVar += "            <p>积分兑换<\/p>";
          strVar += "          <\/div>";
          strVar += "          <div class=\"btn_balance\">";
          strVar += "            <img src=\"..\/..\/image\/tb1.png\" alt=\"\">";
          strVar += "            <p>余额兑换<\/p>";
          strVar += "          <\/div>";
          $(".white_box").html(strVar);
        }
        $(".select").css("display","block");
        $("html").css("overflow","hidden");
        $("body").css("overflow","hidden");
        // 积分兑换
        $(".btn_integral").click(function() {
          var coupon_id = that.attr("couponId");
          console.log(coupon_id);
          var token = localStorage.getItem("token");
          $(".select").css("display","none");
          $(".integral").css("display","block");
          $(".p2").text("积分兑换");
          $(".p3").text("所需积分："+integral);
          // 点击确定时
            $("#yes1").click(function() {
            var systemType = api.systemType //判断设备是 android 还是 iOS
            if (systemType == 'ios') {
                //IOS密码输入框
                var pay = api.require('payPasswordInput');
                var param = {};
                param.title = '请输入密码!';
                pay.showInput(function(ret, err) {
                    var pay_pwd = ret.password;
                    //验证支付密码
                    $.ajax({
                        url: dns + 'pay/password',
                        type: 'POST',
                        async: false,
                        data: {
                            'pay_pwd': pay_pwd
                        },
                        beforeSend: function(request) {
                            request.setRequestHeader("token", localStorage.getItem('token'));
                        },
                        success: function(res) {
                            if (res.code == '20000') {
                                //密码成功通过---确认支付
                                $.ajax({
                                  type:"post",
                                  data:{
                                    coupon_id:coupon_id,
                                    type:2
                                  },
                                  beforeSend: function(request) {
                                      request.setRequestHeader("token", token);
                                  },
                                  url:dns+"coupon/receive",
                                  success:function(res){
                                    // 当积分兑换成功时改变个人中心的积分值
                                    api.sendEvent({
                                      name:"jifen",
                                      extra: {
                                      key1: integral
                                      }
                                    })
                                    // console.log(JSON.stringify(res));
                                    $(".pink").css("display","block");
                                    var strVar="";
                                    strVar += "<p>恭喜您兑换成功!<\/p>";
                                    strVar += "<p>请到我的卡券中查看<\/p>";
                                    $(".pink").html(strVar);
                                  },
                                  error:function(err){
                                    console.log(JSON.parse(err.responseText).msg);
                                    var msg = JSON.parse(err.responseText).msg;
                                    $(".pink").css("display","block");
                                    var strVar="";
                                    strVar += "<p>"+msg+"</p>";
                                    $(".pink").html(strVar)
                                  }
                                })
                            }
                        },
                        error: function(err) {
                            api.toast({
                                msg: JSON.parse(err.responseText).msg,
                                duration: 2000,
                                location: 'bottom' //'bottom'
                            });
                            return;
                        }
                    });

                });
            };
            //安卓 密码输入框
            if (systemType == 'android') {
                var dialogBox = api.require('dialogBox');
                dialogBox.input({
                    keyboardType: 'secure',
                    texts: {
                        title: '请输入支付密码',
                        placeholder: '输入支付密码',
                        leftBtnTitle: '取消',
                        rightBtnTitle: '确定'
                    },
                    styles: {
                        bg: '#fff',
                        corner: 2,
                        w: 300,
                        h: 240,
                        title: {
                            h: 60,
                            alignment: 'center',
                            size: 18,
                            color: '#000',
                            marginT: 30,
                        },
                        input: {
                            h: 60,
                            y: 30,
                            marginT: 15,
                            marginLeft: 10,
                            marginRight: 10,
                            textSize: 16,
                            textColor: '#000'
                        },
                        dividingLine: {
                            width: 0.5,
                            color: '#696969'
                        },
                        left: {
                            bg: 'rgba(0,0,0,0)',
                            color: '#E4C493',
                            size: 18,
                            h:40
                        },
                        right: {
                            bg: 'rgba(0,0,0,0)',
                            color: '#E4C493',
                            size: 18,
                            h:80
                        }
                    }
                }, function(ret) {
                    //验证支付密码
                    if (ret.eventType == 'right') {
                        //确认支付
                        var dialogBox = api.require('dialogBox');
                        dialogBox.close({
                            dialogName: 'input'
                        });
                        $.ajax({
                            url: dns + 'pay/password',
                            type: 'POST',
                            async: false,
                            data: {
                                'pay_pwd': ret.text
                            },
                            beforeSend: function(request) {
                                request.setRequestHeader("token", localStorage.getItem('token'));
                            },
                            success: function(res) {
                                if (res.code == '20000') {
                                  $.ajax({
                                    type:"post",
                                    data:{
                                      coupon_id:coupon_id,
                                      type:2
                                    },
                                    beforeSend: function(request) {
                                        request.setRequestHeader("token", token);
                                    },
                                    url:dns+"coupon/receive",
                                    success:function(res){
                                      // 当积分兑换成功时改变个人中心的积分值
                                      api.sendEvent({
                                        name:"jifen",
                                        extra: {
                                        key1: integral
                                        }
                                      })
                                      // console.log(JSON.stringify(res));
                                      $(".pink").css("display","block");
                                      var strVar="";
                                      strVar += "<p>恭喜您兑换成功!<\/p>";
                                      strVar += "<p>请到我的卡券中查看<\/p>";
                                      $(".pink").html(strVar)
                                    },
                                    error:function(err){
                                      // console.log(JSON.parse(err.responseText).msg);
                                      var msg = JSON.parse(err.responseText).msg;
                                      $(".pink").css("display","block");
                                      var strVar="";
                                      strVar += "<p>"+msg+"</p>";
                                      $(".pink").html(strVar)
                                    }
                                  })
                                }
                            },
                            error: function(err) {
                                api.toast({
                                    msg: JSON.parse(err.responseText).msg,
                                    duration: 2000,
                                    location: 'bottom' //'bottom'
                                });
                                return;
                            }
                        });
                    }
                    if (ret.eventType == 'left') {
                        //取消支付
                        var dialogBox = api.require('dialogBox');
                        dialogBox.close({
                            dialogName: 'input'
                        });
                        api.toast({
                            msg: '您取消了兑换',
                            duration: 2000,
                            location: 'bottom' //'bottom'
                        });
                        return;
                    }
                });
            }

            })
          $(".integral").click(function() {
            $(".pink").css("display","none");
            $(".integral").css("display","none");
            $("html").css("overflow","");
            $("body").css("overflow","");
          });
          $(".box1").click(function(e) {
              e.stopPropagation();
          });
          // 点击取消时
          $("#no1").click(function() {
            $(".integral").css("display","none");
            $("html").css("overflow","");
            $("body").css("overflow","");
          });

        });
        // 点击余额兑换时
        $(".btn_balance").click(function () {
          var coupon_id = that.attr("couponId");
          var token = localStorage.getItem("token");
          $(".select").css("display","none");
          $(".integral").css("display","block");
          $(".p2").text("余额兑换");
          $(".p3").text("所需余额："+balance);
          // 点击确定时
            $("#yes1").click(function() {
              var systemType = api.systemType //判断设备是 android 还是 iOS
              if (systemType == 'ios') {
                  //IOS密码输入框
                  var pay = api.require('payPasswordInput');
                  var param = {};
                  param.title = '请输入密码!';
                  pay.showInput(function(ret, err) {
                      var pay_pwd = ret.password;
                      //验证支付密码
                      $.ajax({
                          url: dns + 'pay/password',
                          type: 'POST',
                          async: false,
                          data: {
                              'pay_pwd': pay_pwd
                          },
                          beforeSend: function(request) {
                              request.setRequestHeader("token", localStorage.getItem('token'));
                          },
                          success: function(res) {
                              if (res.code == '20000') {
                                  //密码成功通过---确认支付
                                  $.ajax({
                                    type:"post",
                                    data:{
                                      coupon_id:coupon_id,
                                      type:3
                                    },
                                    beforeSend: function(request) {
                                        request.setRequestHeader("token", token);
                                    },
                                    url:dns+"coupon/receive",
                                    success:function(res){
                                      // 当余额兑换成功时改变个人中心的积分值
                                      api.sendEvent({
                                        name:"yue",
                                        extra: {
                                        key2: balance
                                        }
                                      })
                                      // console.log(JSON.stringify(res));
                                      $(".pink").css("display","block");
                                      var strVar="";
                                      strVar += "<p>恭喜您兑换成功!<\/p>";
                                      strVar += "<p>请到我的卡券中查看<\/p>";
                                      $(".pink").html(strVar)
                                    },
                                    error:function(err){
                                      // console.log(JSON.parse(err.responseText).msg);
                                      var msg = JSON.parse(err.responseText).msg;
                                      $(".pink").css("display","block");
                                      var strVar="";
                                      strVar += "<p>"+msg+"<\/p>";
                                      $(".pink").html(strVar)
                                    }
                                  })
                              }
                          },
                          error: function(err) {
                              api.toast({
                                  msg: JSON.parse(err.responseText).msg,
                                  duration: 2000,
                                  location: 'bottom' //'bottom'
                              });
                              return;
                          }
                      });

                  });
              };

              //安卓 密码输入框
              if (systemType == 'android') {
                  var dialogBox = api.require('dialogBox');
                  dialogBox.input({
                      keyboardType: 'secure',
                      texts: {
                          title: '请输入支付密码',
                          placeholder: '输入支付密码',
                          leftBtnTitle: '取消',
                          rightBtnTitle: '确定'
                      },
                      styles: {
                          bg: '#fff',
                          corner: 2,
                          w: 300,
                          h: 240,
                          title: {
                              h: 60,
                              alignment: 'center',
                              size: 18,
                              color: '#000',
                              marginT: 30,
                          },
                          input: {
                              h: 60,
                              y: 30,
                              marginT: 15,
                              marginLeft: 10,
                              marginRight: 10,
                              textSize: 16,
                              textColor: '#000'
                          },
                          dividingLine: {
                              width: 0.5,
                              color: '#696969'
                          },
                          left: {
                              bg: 'rgba(0,0,0,0)',
                              color: '#E4C493',
                              size: 18,
                              h:40
                          },
                          right: {
                              bg: 'rgba(0,0,0,0)',
                              color: '#E4C493',
                              size: 18,
                              h:80
                          }
                      }
                  }, function(ret) {
                      //验证支付密码
                      if (ret.eventType == 'right') {
                          //确认支付
                          var dialogBox = api.require('dialogBox');
                          dialogBox.close({
                              dialogName: 'input'
                          });
                          $.ajax({
                              url: dns + 'pay/password',
                              type: 'POST',
                              async: false,
                              data: {
                                  'pay_pwd': ret.text
                              },
                              beforeSend: function(request) {
                                  request.setRequestHeader("token", localStorage.getItem('token'));
                              },
                              success: function(res) {
                                  if (res.code == '20000') {
                                      //密码成功通过---确认支付
                                      $.ajax({
                                        type:"post",
                                        data:{
                                          coupon_id:coupon_id,
                                          type:3
                                        },
                                        beforeSend: function(request) {
                                            request.setRequestHeader("token", token);
                                        },
                                        url:dns+"coupon/receive",
                                        success:function(res){
                                          // console.log(JSON.stringify(res));
                                          // 当余额兑换成功时改变个人中心的积分值
                                          api.sendEvent({
                                            name:"yue",
                                            extra: {
                                            key2: balance
                                            }
                                          })
                                          $(".pink").css("display","block");
                                          var strVar="";
                                          strVar += "<p>恭喜您兑换成功!<\/p>";
                                          strVar += "<p>请到我的卡券中查看<\/p>";
                                          $(".pink").html(strVar)
                                        },
                                        error:function(err){
                                          // console.log(JSON.parse(err.responseText).msg);
                                          var msg = JSON.parse(err.responseText).msg;
                                          $(".pink").css("display","block");
                                          var strVar="";
                                          strVar += "<p>"+msg+"<\/p>";
                                          $(".pink").html(strVar)
                                        }
                                      })
                                  }
                              },
                              error: function(err) {
                                  api.toast({
                                      msg: JSON.parse(err.responseText).msg,
                                      duration: 2000,
                                      location: 'bottom' //'bottom'
                                  });
                                  return;
                              }
                          });
                      }
                      if (ret.eventType == 'left') {
                          //取消支付
                          var dialogBox = api.require('dialogBox');
                          dialogBox.close({
                              dialogName: 'input'
                          });
                          api.toast({
                              msg: '您取消了支付',
                              duration: 2000,
                              location: 'bottom' //'bottom'
                          });
                          return;
                      }
                  });
              }
            })
          $(".integral").click(function() {
            $(".pink").css("display","none");
            $(".integral").css("display","none");
            $("html").css("overflow","");
            $("body").css("overflow","");
          });
          $(".box1").click(function(e) {
              e.stopPropagation();
          });
          // 点击取消时
          $("#no1").click(function() {
            $(".integral").css("display","none");
            $("html").css("overflow","");
            $("body").css("overflow","");
          });
        })
      })
    })
    // $(".btn_conversion").click(function() {
    //     var type = $(this).attr("typeAttr");
    //     console.log(type);

    // });
    $(".select").click(function() {
        $(".pink").css("display","none")
        $(".select").css("display","none");
        $("html").css("overflow","");
        $("body").css("overflow","");
    });
    $(".box").click(function(e) {
        e.stopPropagation();
    });
  }
</script>

</html>
